<script setup>
	import dashboardCategorizeApi from '@/views/plugin/dashboard/api/dashboardCategorizeApi'
	import { message } from 'ant-design-vue'
	import { ref, computed } from 'vue'

	const title = computed(() => (formData.value.id ? '修改仪表盘分类' : '添加仪表盘分类'))

	const emit = defineEmits(['success'])
	// 抽屉是否可见
	const visible = ref(false)

	// 表单对象
	const formData = ref({
		name: '',
		parentId: '0'
	})

	// 父级分类树数据
	const parentTreeData = ref([])

	// 表单规则
	const rules = {
		name: [{ required: true, message: '请输入分类名称' }],
		parentId: [{ required: true, message: '请选择父级分类' }]
	}

	// 表单引用
	const formRef = ref()

	// 加载父级分类树
	const loadParentTree = () => {
		dashboardCategorizeApi.tree().then((res) => {
			if (res !== null) {
				// 构建树数据，添加顶级节点
				parentTreeData.value = [
					{
						id: '0',
						name: '顶级分类',
						children: res
					}
				]
				// 如果是编辑模式，需要过滤掉当前节点及其子节点
				if (formData.value.id) {
					const filterNode = (nodes) => {
						return nodes.filter((node) => {
							if (node.id === formData.value.id) return false
							if (node.children) {
								node.children = filterNode(node.children)
							}
							return true
						})
					}
					parentTreeData.value[0].children = filterNode(res)
				}
			}
		})
	}

	// 打开表单
	const open = (data) => {
		visible.value = true
		// 加载父级分类树
		loadParentTree()
		// 如果有数据，则是编辑模式
		if (data) {
			// 编辑模式，复制数据
			Object.assign(formData.value, data)
		} else {
			// 新增模式，重置表单
			formData.value = {
				name: '',
				parentId: '0'
			}
		}
	}

	// 关闭表单
	const close = () => {
		visible.value = false
		// 重置表单
		formRef.value?.resetFields()
		// 清空树数据
		parentTreeData.value = []
	}

	// 提交表单
	const submit = () => {
		formRef.value
			.validate()
			.then(() => {
				// 根据是否有ID判断是新增还是编辑
				const api = formData.value.id ? dashboardCategorizeApi.edit : dashboardCategorizeApi.add
				api(formData.value).then(() => {
					close()
					emit('success')
				})
			})
			.catch((error) => {
				console.log('验证失败', error)
			})
	}

	// 对外暴露方法
	defineExpose({
		open
	})
</script>

<template>
	<a-drawer :title="title" :width="500" :visible="visible" :destroy-on-close="true" @close="close">
		<a-form :model="formData" :rules="rules" ref="formRef" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
			<a-form-item label="父级分类" name="parentId">
				<a-tree-select
					v-model:value="formData.parentId"
					:tree-data="parentTreeData"
					:field-names="{ children: 'children', label: 'name', value: 'id' }"
					placeholder="请选择父级分类"
					tree-default-expand-all
					:disabled="formData.id === '0'"
				/>
			</a-form-item>
			<a-form-item label="分类名称" name="name">
				<a-input v-model:value="formData.name" placeholder="请输入分类名称" />
			</a-form-item>
		</a-form>
		<div class="drawer-footer">
			<a-button style="margin-right: 8px" @click="close">取消</a-button>
			<a-button type="primary" @click="submit">确定</a-button>
		</div>
	</a-drawer>
</template>

<style scoped lang="less">
	.drawer-footer {
		position: absolute;
		bottom: 0;
		width: 100%;
		border-top: 1px solid #e8e8e8;
		padding: 10px 16px;
		text-align: right;
		left: 0;
		background: #fff;
		border-radius: 2px;
	}
</style>
